<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>消息列表</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/aui.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/public.css" rel="stylesheet" type="text/css">
    <link href="../../css/public_win.css" rel="stylesheet" type="text/css">
    <style media="screen">
        .coupon_item_list {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 2.5rem;
            line-height: 2.5rem;
            position: relative;
        }

        .coupon_item_list:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0.05rem;
            width: 100%;
            background: #E7E6E6;
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
            transform-origin: left bottom;
            -webkit-transform-origin: left bottom;
        }

        .coupon_item_list .coupon_item {
            text-align: center;
            font-size: 0.7rem;
            color: #656566;
            position: relative;
        }

        .coupon_item_list .coupon_item .red_point {
            width: 0.4rem;
            height: 0.4rem;
            background: rgba(221, 72, 72, 1);
            border-radius: 100%;
            position: absolute;
            top: 0.65rem;
            right: -0.5rem;
        }

        .coupon_item_list .coupon_item.active {
            font-size: 0.75rem;
            color: rgba(0, 202, 207, 1);
            font-weight: 500;
            position: relative;
        }

        .coupon_item_list .coupon_item.active:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            height: 0.1rem;
            width: 2.3rem;
            background: rgba(0, 202, 207, 1);
            transform: translateX(-50%);
            /*transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
            transform-origin: left bottom;
            -webkit-transform-origin: left bottom;*/
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <header>
            <div class="public_header public_line">
                <div class="back_img" tapmode onclick="fnBack()">
                    <img src="../../image/back.png">
                </div>
                <span class="public_title">消息中心</span>
                <div class="right_title_btn" tapmode @click="fnSetMessStatus()">全部已读</div>
            </div>
            <div class="coupon_item_list">
                <div v-for="item,index in groupList" :class="newIndex==index?'coupon_item active':'coupon_item'" tapmode @click="fnSetPage(index)">
                    {{item.text}}
                    <!-- <span class="red_point" v-if="index=='1'"></span> -->
                </div>
            </div>
        </header>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-tabbar.js"></script>
<script type="text/javascript">
    var vm;
    var USER, $S;
    apiready = function() {
        USER = USER();
        $S = SERVICE();
        fnInit();

    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                newIndex: "0",
                groupList: [{
                    "text": "站内信",
                    "key": "1"
                }, {
                    "text": "通知",
                    "key": "2"
                }, {
                    "text": "咨询",
                    "key": "3"
                }, {
                    "text": "评论",
                    "key": "4"
                }]
            },

            mounted: function() {
                this.$nextTick(function() {
                    fnOpenReportGroup();
                })
            },
            methods: {

            }
        })
    }

    function fnOpenReportGroup() {
        var frames = [];
        for (var i = 0; i < vm.groupList.length; i++) {
            frames.push({
                name: 'message_list' + i,
                url: './message_list.html',
                bgColor: 'rgba(255,255,255,0)',
                pageParam: {
                    newIndex: i,
                    status: vm.groupList[i].key,
                }
            })
        }
        console.log(frames);
        var _top = AD("header").offsetH() * 1;
        var _footerH = localStorage.safeBottom;
        var param = {
            name: 'message_list_group',
            background: 'rgba(255,255,255,0)',
            rect: {
                x: "0",
                y: _top,
                w: "auto",
                h: api.winHeight - _top - _footerH, //相对父window下外边距的距离
            },
            index: 0,
            preload: 2,
            frames: frames
        }
        fnOpenFrameGroup(param, function(ret, err) {
            fnSetNavMenuIndex(ret.index)
        });
    }

    function fnSetPage(key) {
        key = key + "";
        api.setFrameGroupIndex({
            name: 'message_list_group',
            index: key
        });
    }

    function fnSetNavMenuIndex(key) {
        vm.newIndex = key;
    }

    //页面返回
    function fnBack() {
        fnDelayCloseWin(0);
    }

    function fnSetMessStatus() {
        var postData = {
            "messType": vm.newIndex * 1 + 1,
            "userType": "1"
        }
        $S.POST("apiAppMessage/saveMessageIfRead", postData, function(ret, err) {
            if (ret && ret.status == "200") {
                api.execScript({
                    name: 'message_list_win',
                    frameName: 'message_list' + vm.newIndex,
                    script: 'fnInitPage();'
                });
                api.execScript({
                    name: 'mine',
                    script: 'fnInitPage();'
                });
                api.execScript({
                    name: 'main',
                    frameName: 'tab_index',
                    script: 'fnInitPage();'
                });
                api.execScript({
                    name: 'main',
                    frameName: 'tab_course',
                    script: 'fnInitPage();'
                });
                api.execScript({
                    name: 'main',
                    frameName: 'tab_consult',
                    script: 'fnInitPage();'
                });
            }
            $S.CloseProgress();
        })
    }
</script>

</html>
